<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>菜单列表</title>
        <% include("/common/common_css_js.html"){} %>
    </head>
    <body>

        <div class = "mini-fit">
            <div id="datagrid1" class="mini-datagrid"
                 style="width: 100%; height: 100%;"
                 url="${base}/menu/getMenuList" idField="id"
                 showPager="true" pageSize="20" sizeList="[10,20,30,50,100]"
                 multiSelect = "true" allowResize="true"
                 showGroupsSummary="true" showSummaryRow="true" summaryPosition="bottom"
                 allowSortColumn = "true"
                 onshowrowdetail="showRowDetail" >
                <div property="columns">
                    <div type="expandcolumn" ></div>
                    <div field="id" width="140" headerAlign="center" align="center" allowSort="true">ID</div>
                    <div field="text" width="140" headerAlign="center" align="center" allowSort="true" >名称</div>
                    <div field="iconCls" width="140" headerAlign="center" align="center" allowSort="true" >图标样式</div>
                    <div field="url" width="140" headerAlign="center" align="left" allowSort="true" >URL</div>
                    <div width="140" headerAlign="center" align="center" allowSort="false"  renderer="opRender">操作</div>
                </div>
            </div>
        </div>

        <!-- 菜单编辑 -->
        <div id="editMenuPanel" class="mini-window" title="菜单编辑" style="width:800px;height:400px;"
             showMaxButton="true" showCollapseButton="false" showMinButton="true" showShadow="true"
             showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">
            <div property="footer" style="padding:10px;text-align: right">
                <a  class="mini-button" iconCls="icon-ok" onclick="save()">保存</a>
                <a  class="mini-button" iconCls="icon-close" onclick="closePanel('editMenuPanel')">关闭</a>
            </div>
            <div id="menuForm">

                <span>菜单ID:</span>
                <input id="id" name="id" emptyText="id值"  class="mini-textbox" required="true" enabled="true" enabled="true" requiredErrorText="ID不能为空" />
                <span style="color: red">ID如果与系统中现有菜单项重复，则会更新，否则会插入新的菜单项</span>

                <div style="margin-top: 5px"></div>

                <span>父菜单项:</span>
                <input id="pid" name="pid" class="mini-treeselect" style="width:200px;" textField="text" valueField="id" emptyText="请选择..."
                       required="true" allowInput="false" showNullItem="true" nullItemText="请选择..." requiredErrorText=""/>
                <span style="color: red">如果父菜项为0,则表示添加一级菜单</span>

                <div style="margin-top: 5px"></div>

                <span>菜单名称:</span>
                <input id="text" name="text" class="mini-textbox" style="width: 200px" emptyText="菜单名称" required="true" requiredErrorText="菜单名称不能为空"/>

                <div style="margin-top: 5px"></div>

                <span>图标样式:</span>
                <input id="iconCls" name="iconCls" class="mini-textbox" style="width: 400px" emptyText="图标CSS样式" required="true" requiredErrorText="图标CSS样式不能为空"/>

                <div style="margin-top: 5px"></div>
                <span>URL:</span>
                <input id="url" name="url" class="mini-textbox" style="width: 400px" emptyText="菜单URL" required="false" requiredErrorText="菜单URL不能为空"/>

                <div style="margin-top: 5px"></div>
                <span style="color: red;">
                    注意：菜单创建时除如果是该菜单有子菜单，请不要填写URL，其他情况请填写必须填写URL
                </span>

            </div>
        </div>



        <!-- 子表1 -->
        <div id="detailDiv1" style="display:none;width: 100%">
            <div id="detailGrid1" class="mini-datagrid" style="width:100%;height:800px;"
                 showPager="false"
                 url="${base}/menu/getMenuList"
                 onshowrowdetail="showRowDetail1">
                <div property="columns">
                    <div type="expandcolumn" ></div>
                    <div field="id" width="140" headerAlign="center" align="center" allowSort="true">ID</div>
                    <div field="text" width="140" headerAlign="center" align="center" allowSort="true" >名称</div>
                    <div field="iconCls" width="140" headerAlign="center" align="center" allowSort="true" >图标样式</div>
                    <div field="url" width="140" headerAlign="center" align="left" allowSort="true" >URL</div>
                    <div width="140" headerAlign="center" align="center" allowSort="false"  renderer="opRender">操作</div>
                </div>
            </div>
        </div>


        <!-- 子表2 -->
        <div id="detailDiv2" style="display:none;width: 100%">
            <div id="detailGrid2" class="mini-datagrid" style="width:100%;height:600px;"
                 showPager="false"
                 url="${base}/menu/getMenuList"
                 onshowrowdetail="showRowDetail2">
                <div property="columns">
                    <div type="expandcolumn" ></div>
                    <div field="id" width="140" headerAlign="center" align="center" allowSort="true">ID</div>
                    <div field="text" width="140" headerAlign="center" align="center" allowSort="true" >名称</div>
                    <div field="iconCls" width="140" headerAlign="center" align="center" allowSort="true" >图标样式</div>
                    <div field="url" width="140" headerAlign="center" align="left" allowSort="true" >URL</div>
                    <div width="140" headerAlign="center" align="center" allowSort="false"  renderer="opRender">操作</div>
                </div>
            </div>
        </div>


        <!-- 子表3 -->
        <div id="detailDiv3" style="display:none;width: 100%">
            <div id="detailGrid3" class="mini-datagrid" style="width:100%;height:400px;"
                 showPager="false"
                 url="${base}/menu/getMenuList">
                <div property="columns">
                    <div field="id" width="140" headerAlign="center" align="center" allowSort="true">ID</div>
                    <div field="text" width="140" headerAlign="center" align="center" allowSort="true" >名称</div>
                    <div field="iconCls" width="140" headerAlign="center" align="center" allowSort="true" >图标样式</div>
                    <div field="url" width="140" headerAlign="center" align="left" allowSort="true" >URL</div>
                    <div width="140" headerAlign="center" align="center" allowSort="false"  renderer="opRender">操作</div>
                </div>
            </div>
        </div>


        <script type="text/javascript">
            mini.parse();

            let grid = mini.get("datagrid1");

            let editMenuPanel = mini.get("editMenuPanel");
            let pid = mini.get("pid");

            let menuForm = new mini.Form("#menuForm");

            let detailGrid1 = mini.get("detailGrid1");
            let detailGrid2 = mini.get("detailGrid2");
            let detailGrid3 = mini.get("detailGrid3");

            let detailDiv1 = document.getElementById("detailDiv1");
            let detailDiv2 = document.getElementById("detailDiv2");
            let detailDiv3 = document.getElementById("detailDiv3");

            // 数据库中当前菜单数据
            let menuData = [];

            $(function () {

                reloadMenu();

                // 加载列表数据
                grid.load({pid:"0"});
            });

            function opRender(e) {
                let item = e.record;
                /**
                 * children: null
                 iconCls: "fa fa-send-o"
                 id: "1"
                 pid: "0"
                 text: "基础数据"
                 url: null
                 */

                let linkHtml = '<a class="mini-button" style="padding: 2px" onclick="editMenu(\'' + item.id + '\',\'' + item.pid + '\',\'' + item.text + '\',\'' + item.url + '\',\''+ item.iconCls +'\')">编辑</a>' +
                    '<a class="mini-button" style="margin-left: 10px;padding: 2px" onclick="addSubMenu(\'' + item.id + '\',\'' + item.pid + '\',\'' + item.text + '\',\'' + item.url + '\',\''+ item.iconCls +'\')">添加子菜单</a>' +
                    '<a class="mini-button" style="margin-left: 10px;padding: 2px" onclick="deleteMenu(\'' + item.id + '\')">删除</a>';
                return linkHtml;
            }


            function showRowDetail(e) {
                let grid = e.sender;
                let row = e.record;

                let td = grid.getRowDetailCellEl(row);
                td.appendChild(detailDiv1);

                detailDiv1.style.display = "block";

                detailGrid1.load({pid: row.id});
            }


            function showRowDetail1(e){
                let grid = e.sender;
                let row = e.record;

                let td = grid.getRowDetailCellEl(row);
                td.appendChild(detailDiv2);

                detailDiv2.style.display = "block";

                detailGrid2.load({pid: row.id});
            }

            function showRowDetail2(e){
                let grid = e.sender;
                let row = e.record;

                let td = grid.getRowDetailCellEl(row);
                td.appendChild(detailDiv3);

                detailDiv3.style.display = "block";

                detailGrid3.load({pid: row.id});
            }

            function editMenu(idValue,pidValue,textValue,urlValue,iconClsValue) {

                let itemData = {id:idValue,pid:pidValue,text:textValue,url:urlValue,iconCls:iconClsValue};

                menuForm.setData(itemData);

                public_showModelAtPos("editMenuPanel", "center", "middle");
            }

            function addSubMenu(idValue,pidValue,textValue,urlValue,iconClsValue) {

                pid.setValue(idValue);
                pid.set({enabled:false});

                public_showModelAtPos("editMenuPanel", "center", "middle");
            }


            function closePanel(panelId) {
                pid.set({enabled:true});
                menuForm.clear();
                public_onCancel(panelId);
            }


            function save() {
                menuForm.validate();
                if (menuForm.isValid() == false) {
                    return;
                }

                let menuItem = menuForm.getData(true);

                // 给出确认提示框
                mini.confirm("确定保存该菜单项？", "保存提示",
                    function (action) {
                        if (action == "ok") {
                            let ret = public_getServerData("${base}/menu/save",menuItem);
                            showAlert(ret.message,function () {
                                if(ret.ok){
                                    grid.reload();
                                    closePanel('editMenuPanel');
                                    reloadMenu();
                                }
                            });
                        }
                    }
                );



            }

            function deleteMenu(idValue) {
                if(public_isEmpty(idValue)){
                    showAlert("删除的菜单项ID为空，不能删除!");
                    return;
                }
                // 给出确认提示框
                mini.confirm("确定删除选择的菜单项?", "删除提示",
                    function (action) {
                        if (action == "ok") {
                            let ret = public_getServerData("${base}/menu/delete",{id:idValue});
                            showAlert(ret.message,function (){
                                if(ret.ok){
                                    grid.reload();
                                    reloadMenu();
                                }
                            });
                        }
                    }
                );

            }

            function reloadMenu(){
                menuData = public_getServerData("${base}/menu/getMenuNoPageList",{pid:"0"});
                pid.loadList(menuData,"id","pid");
            }


        </script>

    </body>




</html>